<template>
  <div class="leftCardPannel-container" :class="{ show: !isCardFixed }">
    <div class="panel-background" @click="setCardFixed"></div>
    <div :class="{ cardFixed: isCardFixed }">
      <slot></slot>
    </div>
    <div
      class="btn-arrow"
      :class="{ reverse: isCardFixed }"
      @click="toggleClick"
    >
      <!-- eslint-disable -->
      <img 
        style="width: 14px; height: 36px;"
        src=""
      />
      <!-- eslint-enable -->
    </div>
  </div>
</template>
<script>
  export default {
    name: 'leftCardPannel',
  }
</script>
<script setup>
  import { computed } from '@vue/reactivity'
  import { useStore } from 'vuex'
  const store = useStore()
  const lowerThanXXl = computed(() => {
    const width = document.body.clientWidth
    const height = document.body.clientHeight
    console.log('width =' + document.body.clientWidth)
    console.log('height =' + document.body.clientHeight)
    return width < 1600
    // return store.getters.deviceModelSize !== 'XXXL'
  })
  const isCardFixed = computed(() => {
    return store.getters.fixedLeftCard
  })
  function toggleClick() {
    store.dispatch('app/fixedLeftCard')
  }
  function setCardFixed() {
    store.dispatch('app/fixedLeftCard')
  }
</script>
<style lang="scss" scoped>
  .show {
    transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);

    .panel-background {
      z-index: 20000;
      opacity: 1;
      width: 100%;
      height: 100%;
    }
  }
  .leftCardPannel-container {
    float: left;
    display: flex;

    .panel-background {
      position: fixed;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
      background: rgba(0, 0, 0, 0.2);
      z-index: -1;
    }
    .btn-arrow {
      margin-top: 360px;
      cursor: pointer;
      color: #409eff;
      transform: rotateY(180deg);
      width: 14px;
      height: 36px;
      img {
        width: 14px;
      }
    }
    .reverse {
      transform: rotateY(0deg);
    }
    .cardFixed {
      width: 0px;
      overflow: hidden;
    }

    @keyframes cloudLeft {
      0% {
        top: 17px;
        left: 220px;
        opacity: 0;
      }
      20% {
        top: 33px;
        left: 188px;
        opacity: 1;
      }
      80% {
        top: 81px;
        left: 92px;
        opacity: 1;
      }
      100% {
        top: 97px;
        left: 60px;
        opacity: 0;
      }
    }
  }
  .leftCardPannel-container.leftFixed {
    position: fixed;
    z-index: 100;
  }
</style>
